<template>
  <div class="container">
    <van-field
      v-model="password"
      placeholder="至少6位，包含：数字，大写字母，小写字母，特殊符号"
      type="password"
      label="密码"
    />
    <van-button
      @click="handleFinished"
      type="danger"
      :disabled="!btnFinishFlag"
      round
      block
      >完成</van-button
    >
  </div>
</template>

<script lang="ts" setup>
import { dofinishregister } from '@/api/login'
import { useLoginStore } from '@/stores/login'
import { storeToRefs } from 'pinia'
import { Dialog } from 'vant'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'

const password = ref('')
const { tel } = storeToRefs(useLoginStore())
const router = useRouter()
const btnFinishFlag = computed(() => {
  // 至少6位，包含：数字，大写字母，小写字母，特殊符号
  return /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/.test(
    password.value
  )
})

const handleFinished = () => {
  // tel: 17512345678
  // password: 123456qW!
  dofinishregister({
    tel: tel.value,
    password: password.value,
  })
    .then((res: any) => {
      if (res.code === '200') {
        Dialog.alert({
          message: '注册成功，立刻去登陆？',
        }).then(() => {
          // on close
          router.go(-3)
        })
      }
    })
    .catch((err) => {
      console.error(err)
    })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 50px 30px;
  background: #fff;
  box-sizing: border-box;
  .input {
    margin-bottom: 100px;
  }
}
</style>
